<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset=" UTF-8">
    <title>注册账号</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <!-- load css -->
    <link rel="stylesheet" type="text/css" href="myconfig/layui/css/layui.css"
          th:href="@{/myconfig/layui/css/layui.css}" media="all">
    <link rel="stylesheet" type="text/css" href="css/login.css" th:href="@{/css/login.css}" media="all">
</head>
<body>
<div class="layui-canvs"></div>
<div class="layui-layout layui-layout-login layui-form">
    <h1>
        <strong>柳州市事项管理系统</strong>
        <em>Management System</em>
    </h1>
    <div class="layui-form-item">
        <label class="layui-form-label" style="color: white;text-align: center">地区</label>
        <div class="layui-input-inline">
            <select name="area.areaId" required lay-verify="required">
                <option value="">请选择地区</option>
                <option th:each="area:${areaList}" th:value="${area.areaId}" th:text="${area.areaName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label" style="color: white;text-align: center">部门</label>
        <div class="layui-input-inline">
            <select name="department.departmentId" required lay-verify="required">
                <option value="">请选择部门</option>
                <option th:each="department:${departmentList}" th:value="${department.departmentId}"
                        th:text="${department.departmentName}"></option>
            </select>
        </div>
    </div>
    <div class="layui-user-icon larry-login">
        <input type="text" placeholder="账号" class="login_txtbx" name="userLoginName" required lay-verify="required"/>
    </div>
    <div class=" layui-user-icon larry-login">
        <input type="text" placeholder="用户名" class="login_txtbx" name="userName" required lay-verify="required"/>
    </div>
    <div class=" layui-icon-cellphone larry-login">
        <input type="text" placeholder="电话号码" class="login_txtbx"  name="userPhone" required
               lay-verify="required|phoneNumber" id="registerPhone"/>
    </div>
    <div class=" layui-pwd-icon larry-login">
        <input type="password" placeholder="密码" class="login_txtbx" name="userPass" required
               lay-verify="required|pass"/>
    </div>
    <div class=" layui-pwd-icon larry-login ">
        <input type="password" placeholder="确认密码" class="login_txtbx" name="confirmPass" required
               lay-verify="required|pass|confirmPass"/>
    </div>
    <!--<div class=" layui-val-icon larry-login">
        <div class="layui-code-box">
            <input type="text" id="code" name="code" placeholder="验证码" maxlength="4" class="login_txtbx">
            <img id="captcha_img" alt="点击更换" title="点击更换" class="verifyImg" onclick="changeVerifyCode(this)" src="../getKaptchaImage"/>
        </div>
    </div>-->
    <div class=" layui-val-icon larry-login">
        <div class="layui-code-box">
            <input type="text" id="code" name="code" placeholder="验证码" maxlength="4" class="login_txtbx">
            <button type="button" class="verifyImg" id="getCode" onclick="time()">获取验证码</button>
        </div>
    </div>


    <div class="layui-submit larry-login">
        <button type="button" class="submit_btn" lay-submit lay-filter="*">注册</button>
        <!--        <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>-->
    </div>
    <div class="layui-login-text">
        <p>已有账号？去<a href="/user/register" th:href="@{/login.html}">登录</a></p>
        <p>© 2019 吴煜中小组 版权所有</p>
    </div>
</div>
<script type="text/javascript" src="myconfig/layui/layui.all.js"
        th:src="@{/myconfig/layui/layui.all.js}"></script>
<!-- 获取根路径 -->
<script th:replace="fragscript :: basePath"></script>
<script type="text/javascript" src="js/login.js" th:src="@{/js/login.js}"></script>
<script type="text/javascript" src="jsplug/jparticle.jquery.js" th:src="@{/jsplug/jparticle.jquery.js}"></script>
<script type="text/javascript">
    $(function () {
        $(".layui-canvs").jParticle({
            background: "#141414",
            color: "#E6E6E6"
        });
    });
</script>
<script type="text/javascript" th:inline="none">
    'use strict';
    layui.use(['table', 'layer', 'form', 'jquery'], function () {
        var form = layui.form;
        var $ = layui.jquery;
        var layer = layui.layer;
        var registerUrl = "/user/register";

        form.verify({
            pass: [
                /^[A-Za-z0-9]{6,20}$/
                , '密码必须6到12位，且只能由数字和字母组成'
            ],
            confirmPass: function (value, item) {
                if ($("input[name='userPass']").val() != value) {
                    return "两次密码输入不一致";
                }
            },
            phoneNumber: [/^1(3|4|5|7|8)\d{9}$/, "电话号码格式非法!"
            ]
        })
        ;

        form.on('submit(*)', function (data) {
            $.ajax({
                url: basePath + registerUrl,
                type: 'post',
                data:data.field,
                success:function (result) {
                    if (result.code == 0) {
                        window.location.href = basePath + "/login.html";
                        return;
                    }
                    layer.msg(result.message);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    function first(){
        var phone = $("#registerPhone").val();
        $.ajax({
            type: "get",
            url: "registerCode"
            ,success: function (result) {
                phoneRequest(phone);
            }
        })
    }

    var btnDisable = false;//定义全局变量
    function time(){
        if(btnDisable){
            return;
        }
        first();
        timeWait(60);
        btnDisable = true;

    }//此函数保证在倒计时时，点击按钮不会重新进行倒计时。



    function timeWait(time){
        setTimeout(function(){
            if(time>=0){
                $("#getCode").attr("disabled","disabled");//按钮禁用
                $("#getCode").removeClass("aui-btn-primary");//改变按钮的样式
                $("#getCode").text(time+"s后重试");//改变按钮上的文本
                time--;
                timeWait(time);
            }
            else{
                $("#getCode").text("获取验证码");//改变按钮上的文本
                $("#getCode").attr("disabled","false"); //按钮启用
                $("#getCode").addClass("aui-btn-primary");//改变按钮的样式
                btnDisable = false;
            }
        },1000);//每隔一分钟执行一次此函数
    }
    
    function phoneRequest(phone) {
        $.ajax({
            type: "post",
            url: 'message/get' //数据接口, // 数据接口
            ,data:{
                "phone" : phone
            }
            ,success: function (result) {
            }
        })
    }
</script>
</body>
</html>